<template>
	<view class="main">
		<view class="dev-box">
			<textarea v-model="idle.desc" type="text" maxlength="500" placeholder="描述一下宝贝的品牌型号、货品来源..."></textarea>
			<m-upimg count="3" url="https://www.cscmkj.cn/starCityAll/user/saveImg" :notli="true" @onUpImg="onUpImg()"></m-upimg>
		</view>
		<view class="dev-box">
			<view class="item2">
				<view class="category-name">分类</view>
				<view class="radio-box" >
					<view v-for="(item,index) in parent" :class="item.id==selectedParentId?'radio-item selected':'radio-item noselect'" @click="selectCategory(item)">{{item.name}}</view>
				</view>
				
			</view>
			<view class="item2" v-for="(item,index) in childs" v-if="item.commTypeId==selectedParentId">
				<view class="category-name">{{item.pname}}</view>
				<view class="radio-box" >
					<view v-for="(citem,cindex) in item.names" :class="selectedChild[index]==citem?'radio-item selected':'radio-item noselect'" @click="selectCategoryItem(index,citem)">{{citem}}</view>
				</view>
				
			</view>
		</view>
		<view class="dev-box">
			<view class="item">
				<view class="text">原价</view>
				<view class="input-box">
					<input class="item-input" v-model="idle.originalPrice" type="digit" maxlength="10" style="color:red" ></input>
				</view>
				
			</view>
			<view class="item">
				<view class="text">现价</view>
				<view class="input-box">
					<input class="item-input" v-model="idle.nowPrice" type="digit" maxlength="10" style="color:red" ></input>
				</view>
				
			</view>
			<view class="item">
				<view class="text">交易方式</view>
				<view class="input-box">
					<picker @change="selectType" :value="idle.type" :range="typeArray">
						<input class="item-input" disabled="true" placeholder="请选择交易方式" :value="idle.type"/>
					</picker>
				</view>
			</view>
		</view>
		<button class="submitBtn" @click="submit" >立即发布</button>
	</view>
</template>

<script>
		import iInput from '@/components/watch-login/info-input.vue'; //input
	import mUpimg from '@/components/m-upimg/m-upimg.1.vue'; //input
	export default {
		components: {
			iInput,
			mUpimg
		},
		data() {
			return {
				typeArray:["校内交易"],
				idle:{
					desc:"",
					imgs:"",
					type:"",
					originalPrice:0.0,
					nowPrice:0.0
				},
				selectedParentId:0,
				parent:[],
				childs:[],
				selectedChild:[]
			}
		},
		onLoad() {
			this.getCategory();
		},
		methods: {
			async getCategory(){
				let data=await this.$apis.getCategory();
				this.parent=data.parent;
				this.childs=data.childLevel;
				for(var i=0;i<this.childs.length;i++){
					this.childs[i].names=this.childs[i].names.split(",");
					this.selectedChild[i]="";
				}
				console.log(data.parent)
			},
			onUpImg(pList){
				console.log(pList)
				this.idle.imgs=""
				for(var l in pList){
					this.idle.imgs+=pList[l].path_server+",";
				}
				this.idle.imgs=this.idle.imgs.substring(0,this.idle.imgs.length-1)
			},
			selectType(e){
				this.idle.type = this.typeArray[e.target.value];
			},
			selectCategory(e){
				this.selectedParentId=e.id;
				this.selectedChild=[];
			},
			selectCategoryItem(index,e){
				this.$set(this.selectedChild,index,e)
				console.log(this.selectedChild[index])
			},
			submit(){
				
			}
		
		}
	}
</script>

<style lang="scss">
::-webkit-scrollbar{
	display: none;
}
.item-input{
	margin-left:20upx;
	text-align: right;
	padding:20rpx 60rpx 20rpx 20rpx;
}
.selected{
	background-color:#5FDB7E;
	font-weight: bold;
}
.noselect{
	background-color:#F2F2F2;
}
.dev-box{
		margin-top: 16rpx;
		padding: 32rpx;
		.item{
			display: flex;
			border-bottom: 1px solid #F2F2F2;
			margin:0upx 25upx;
			padding: 10rpx 0;
			
			.text{
				text-align-last:justify;
				font-size: 28upx;
				flex:1;
				text-align: center;
				line-height: 76upx;
				font-weight: bold;
			}
			.input-box{
				flex: 4;
				background-image: url("@/static/img/icons-black.png");
				background-repeat: no-repeat;
				background-position: 95% 50%;
				background-size: 20upx 30upx;
				text{
					margin-left:40upx;
					font-size: 28upx;
					line-height: 76upx;
				}
			}
			i-input{
				text-align: right;
				flex: 4;
			}
			.space{
				flex: 4;
			}
		}
		.item2{
			display: flex;
			margin:0upx 25upx;
			padding: 10rpx 0;
			.category-name{
				font-size: 28upx;
				flex:2;
				text-align: right;
				line-height: 55upx;
				font-weight: bold;
				margin-right:30upx;
			}
			
			.radio-box{
				flex:5;
				overflow-x: scroll;
				-webkit-overflow-scrolling: touch;
				white-space: nowrap;
				.radio-item{
					margin-right:30upx;
					line-height: 50upx;
					text-align: center;
					padding:0upx 25upx;
					border-radius: 15upx;
					font-size: 26upx;
					display: inline-block
				}
				
			}
			.input-box{
				flex: 4;
				background-image: url("@/static/img/icons-black.png");
				background-repeat: no-repeat;
				background-position: 95% 50%;
				background-size: 20upx 30upx;
				text{
					margin-left:40upx;
					font-size: 28upx;
					line-height: 76upx;
				}
			}
		}
	}
	.submitBtn{
		
		margin: 40upx 4% 20upx 4%;
		width:92%;
		height:80upx;
		line-height: 80upx;
		color:white;
		border-radius: 35upx;
		background-color: #5FDB7E;
	}
</style>
